/*
 * @Author: mayijun
 * @Date: 2022-05-13 10:21:47
 * @LastEditors: mayijun
 * @LastEditTime: 2022-07-06 14:43:46
 */
//筛选条件弹出框
import API from '@/services';
import { ElCol, ElMessage, ElRow } from 'element-plus';
import { defineComponent, reactive, onMounted, ref, computed, watch } from 'vue';
import './index.scss';
import ColumnInfo from '@/views/indexManage/frontSettings/components/ColumnInfo/index';

const ConditionDrawer = defineComponent({
  name: 'ConditionDrawer',
  props: {
    drawerVisible: {
      type: Boolean,
      default: false
    },
    //1是编辑2是查看
    drawerType: {
      type: String,
      default: "1"
    },
    condition: {
      type: Object,
      default: () => { }
    },
  },
  emits: ['close'],
  setup: (props, { slots, attrs, emit }) => {


    const columnInfoRef: any = ref();

    const state = reactive({
      labelStr: "",
    });

    const handleClose = () => {
      emit('close');
    }

    //保存筛选条件
    const confirmForm = async () => {
      let params = {
        count: columnInfoRef.value.list.length,
        pageCode: props.condition.pageCode,
        settings: columnInfoRef.value.list
      }
      try {
        const { code, data }: any = await API.userPageFilterSetting.postUpdate(params);
        if (code === 200) {
          ElMessage.success("编辑成功");
          handleClose();
        }
      } catch (error) {
        console.log(error);
      }
    }

    //转换中文名称
    const getCnName = (code: any) => {
      switch (code) {
        case 'MODIFIER':
          return '修饰词管理';
        case 'TIMEPERIOD':
          return '统计粒度管理';
        case 'INDEXMANAGE':
          return '指标元信息管理';
        case 'DIMENSIONMGMT':
          return '维度管理';
        default:
          return '';
      }
    }

    watch(
      () => props?.condition,
      () => {
        if (props.drawerType == "2") {
          let labelArray: any[] = props.condition.settings.filter((v: any) => v.isCheck);
          labelArray.sort((a, b) => a.order - b.order);
          labelArray = labelArray.map((v: any) => v.label);
          state.labelStr = labelArray.join("、");
        }
      },
      {
        immediate: true
      }
    );

    return () => {
      return (
        <el-drawer
          size="684"
          v-model={props.drawerVisible}
          destroy-on-close={true}
          close-on-click-modal={false}
          append-to-body={true}
          title={props.drawerType == "1" ? "编辑设置" : "查看设置"}
          custom-class="system-drawer"
          onClosed={handleClose}
        >
          <div class="condition-drawer">
            <div class="info">
              <div class="title">基本信息:</div>
              <div class="model">
                <span class="label" style={{marginLeft:props.drawerType == "2"?"38px":"8px"}}>功能模块:</span>
                <span>{getCnName(props.condition.pageCode)}</span>
              </div>
              {props.drawerType == "2" && (
                <div class="model">
                  <span class="label">当前筛选条件数:</span>
                  <span>{props.condition.count}</span>
                </div>
              )}
            </div>
            <el-divider />

            {props.drawerType == "1" && (
              <ColumnInfo ref={columnInfoRef} list={props.condition.settings} />
            )}

            {props.drawerType == "2" && (
              <div class="info">
                <div class="title">展示筛选条件:</div>
                <div class="model">
                  <span class="label" style={{marginLeft:"38px"}}>已选指标:</span>
                  <span>{state.labelStr}</span>
                </div>
              </div >
            )}

            {props.drawerType == "1" && (
              <div class="footer-btn">
                <el-button type="primary" onClick={() => confirmForm()}>
                  确定
                </el-button>
              </div>
            )}
          </div >
        </el-drawer>
      );
    };
  }
});

export default ConditionDrawer;
